<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.act{
			background: orange;
		}
		div{
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>
<body>
<div>
	<p>666</p>
</div>

<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
	//1.创建节点并设置内容
	let p = $("<p>hello</p>").css('color','red').addClass('act')
	let p2 = $('<p>996</p>')
	let p3 = $('<p>996007</p>')
	let p4 = $('<p>888</p>')
	//2.添加节点 添加到最后
	$('div').append(p)
	p2.appendTo($('div'))

	//3.添加节点 添加到前面
	$('div').prepend(p3)
	p4.prependTo($('div'))

	//删除节点=================
	//empty删除子元素不包含本身
	// $('div').empty()
	// remove 删除节点 自身和子元素都删除
	// $('div').remove()

</script>
</body>
</html>